<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>fn_apply的理解</title>
  </head>

  <body>
    <div>看控制台</div>
    <script>
      function fn1(a, b, c) {
        console.log(this, '-->>> fn1 this')
        console.log(a + b + c, '-->>> fn1')
      }

      function fn2(d, e, f) {
        console.log(d * e * f, '-->>> fn2')
      }

      // 传入参数集合
      fn1.call(fn2, 10, 20, 30)
      fn1.apply(fn2, [10, 20, 30])

      // apply的使用和call差不多，只是apply接收的是一个参数集合
      // apply主要用于解决参数多个和参数数量不确定的情况，示例如下：
      // 实现console.log()的单例模式
      // v1.0 基本使用
      function log(msg) {
        console.log(msg)
      }
      log(1)
      // v2.0 解决多个参数的问题
      function log2() {
        console.log.apply(console, arguments)
      }
      log2(1, 2, 3)
      // v3.0 给每个日志添加一个 '--->' 前缀
      function log3() {
        var args = Array.prototype.slice.call(arguments)
        // 将类数组转为数组也可用Es6的Array.from()
        args.unshift('--->')
        console.log.apply(console, args)
      }
      log3(6, 7, 8)
    </script>
  </body>
</html>
